<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Diff Checker</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./assets/css/main.css" />
    <link rel="stylesheet" href="./assets/css/theme.css" />
  </head>
  <body>
    <div class="container-fluid">
      <!-- header container -->
      <header class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4 text-center">Diff Checker</h1>
          <p class="lead text-center">Drag files or paste text</p>
        </div>
      </header>

      <div class="dark-mode__wrapper">
        <div class="dark-mode__toggle"></div>
          <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
            <g>
              <circle cx="64" cy="63.997" fill="#fedb41" r="39.247"/>
              <g fill="#fea832">
                  <path d="m95.247 65.747a1.749 1.749 0 0 1 -1.747-1.747 29.53 29.53 0 0 0 -29.5-29.5 1.75 1.75 0 0 1 0-3.5 33.035 33.035 0 0 1 33 33 1.749 1.749 0 0 1 -1.753 1.747z"/>
                  <g>
                    <path d="m64 16.75a47.252 47.252 0 0 1 8.5.781c.038-.545.063-1.1.063-1.658-.001-7.801-8.563-14.126-8.563-14.126s-8.563 6.325-8.563 14.126c0 .562.026 1.113.064 1.658a47.243 47.243 0 0 1 8.499-.781z"/>
                    <path d="m64 111.244a47.343 47.343 0 0 0 8.5-.78c.038.544.063 1.095.063 1.657 0 7.8-8.562 14.126-8.562 14.126s-8.563-6.324-8.563-14.126c0-.562.026-1.113.064-1.657a47.335 47.335 0 0 0 8.498.78z"/>
                    <path d="m97.409 30.588a47.349 47.349 0 0 1 5.457 6.562c.413-.358.82-.73 1.217-1.127 5.517-5.517 3.934-16.043 3.934-16.043s-10.526-1.58-16.043 3.934c-.4.4-.769.8-1.127 1.217a47.349 47.349 0 0 1 6.562 5.457z"/>
                    <path d="m30.591 97.406a47.232 47.232 0 0 0 6.562 5.457c-.358.413-.73.82-1.127 1.217-5.517 5.517-16.043 3.934-16.043 3.934s-1.583-10.526 3.934-16.043c.4-.4.8-.769 1.217-1.127a47.291 47.291 0 0 0 5.457 6.562z"/>
                    <path d="m111.247 64a47.335 47.335 0 0 1 -.78 8.5c.544.038 1.095.064 1.657.064 7.8 0 14.126-8.563 14.126-8.563s-6.325-8.562-14.126-8.562c-.562 0-1.113.025-1.657.063a47.343 47.343 0 0 1 .78 8.498z"/>
                    <path d="m16.753 64a47.335 47.335 0 0 0 .78 8.5c-.544.038-1.1.064-1.657.064-7.801-.004-14.126-8.564-14.126-8.564s6.325-8.562 14.126-8.562c.562 0 1.113.025 1.657.063a47.343 47.343 0 0 0 -.78 8.499z"/>
                    <path d="m97.409 97.406a47.349 47.349 0 0 1 -6.562 5.457c.358.413.73.82 1.127 1.217 5.517 5.517 16.043 3.934 16.043 3.934s1.583-10.526-3.934-16.043c-.4-.4-.8-.769-1.217-1.127a47.291 47.291 0 0 1 -5.457 6.562z"/>
                    <path d="m30.591 30.588a47.349 47.349 0 0 0 -5.457 6.562c-.413-.358-.82-.73-1.217-1.127-5.517-5.517-3.934-16.043-3.934-16.043s10.526-1.58 16.043 3.934c.4.4.769.8 1.127 1.217a47.291 47.291 0 0 0 -6.562 5.457z"/>
                  </g>
              </g>
            </g>
          </svg>

          <svg viewBox="-17 0 413 413.23453" xmlns="http://www.w3.org/2000/svg">
            <path d="m267.738281 34.238281c37.894531 76.785157 22.652344 169.179688-37.894531 229.726563s-152.941406 75.789062-229.726562 37.898437c38.59375 78.179688 123.425781 122.3125 209.597656 109.035157 86.171875-13.273438 153.789062-80.890626 167.0625-167.0625 13.273437-86.171876-30.859375-171.003907-109.039063-209.597657zm0 0" fill="#f9db5f"/>
          </svg>
      </div>

      <main>
        <!-- options container-->
        <div class="container options-container hidden">
          <hr class="my-2">
          <div class="row">
            <div class="col-12">
              <details>
                <summary>Options</summary>
                <div class="options">
                  <div class="custom-control custom-checkbox">
                    <input class="custom-control-input" name="difference" type="checkbox" id="differenceBtn">
                    <label class="custom-control-label" for="differenceBtn">Show difference only</label>
                  </div>
                  <b>Format:</b> <br/>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input class="custom-control-input displayType" checked type="radio" name="inlineRadioOptions" id="iR2" value="1">
                    <label class="custom-control-label" for="iR2">Inline</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input class="custom-control-input displayType" type="radio" name="inlineRadioOptions" id="iR1" value="0">
                    <label class="custom-control-label" for="iR1">Side by side</label>
                  </div>
                </div>
              </details>
            </div>
          </div>
          <hr class="my-2">
        </div>

        <!-- diff content -->
        <div class="diff-container hidden"></div>

        <!-- textarea fields -->
        <div class="row areas-container">
            <div class="col-6">
                <div class="left-container">
                    <div class="form-group">
                        <label class="form-text textarea-label" for="lt">Original text</label>
                        <div id="lt" class="draggable"></div>
                        <button class="reset-area">Clear text</button>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="right-container">
                    <div class="form-group">
                        <label class="form-text textarea-label" for="rt">Changed text</label>
                        <div id="rt" class="draggable"></div>
                        <button class="reset-area">Clear text</button>
                    </div>
                  </div>
            </div>
        </div>

        <!-- warning container-->
        <div class="warning-container hidden alert alert-danger col-5" role="alert"></div>

        <!-- button container -->
        <div class="button-container">
          <button id="diffBtn" type="button" class="btn btn-success">Diff items</button>
        </div>

      </main>

      <div class="progress-container hidden">
        <span class="progress-message"></span>
        <div class="progress-dynamic hidden">
          <progress id="update-progress" max="100" value="0"></progress>
          <span class="progress-value"></span>
        </div>
      </div>

      <hr class="mb-2">

      <footer>
        <div class="footer-link about-link">
          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="about-app icon"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm0-338c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" class=""></path></svg>
          <span class="about-info">About</span>
        </div>
        <div class="author-wrapper">
          <span title="Author: Tomasz Rembacz">
            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="about-author icon"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H48V80h480v352zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2zM360 320h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8z" class=""></path></svg>
          </span>
        </div>
        <div class="footer-link git-button">
          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="icon-github icon"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" class=""></path></svg>
          <span class="github-info">Github</span>
        </div>
      </footer>
    </div>
    <script>
      require('./renderer.js');
    </script>
  </body>
</html>
